<template>
  <div class="box">
    <div class="zuo">
      <!-- https://i04piccdn.sogoucdn.com/8ecada39e2875a7a-->
      <div class="tu"><img src="https://i03piccdn.sogoucdn.com/e61b6c9684bdedc0"></div>

      <div>

        <ul>
          <router-link to="/"><li>首页</li></router-link>
          <router-link to="/zhibohome"><li v-if="!sstatus">直播</li></router-link>
          <router-link to="/shujufenxi"><li >数据分析</li></router-link>
          <router-link to="/fenlei" ><li v-if="!sstatus">分类</li></router-link>
          <!--<router-link to=""><li>商城</li></router-link>-->
          <router-link to="/top"><li>视频</li></router-link>
          <router-link to="/fisheight"><li>铁吧</li></router-link>

        </ul>

      </div>
      <div class="box1">
        <div style="width: 200px" >
          <el-input  v-model="input" style="font-size:18px"  placeholder="英雄联盟" class="searchClass" @change="vary()"></el-input>
        </div>
        <div class="sssd">
          <span class="deng1" style="color: whitesmoke" v-if="!sstatus"></span>
          <span class="deng1" style="color: whitesmoke" v-if="!sstatus">历史</span>
          <span class="deng1" style="color: whitesmoke" v-if="!sstatus">关注</span>
          <span class="deng1" style="color: whitesmoke;cursor: pointer" v-if="!sstatus" @click="hot" >充值</span>
          <el-dialog :visible.sync="openOff2" center :append-to-body='true' :lock-scroll="false"  width="70%">
            <template slot="title">
              <div style="font-size: 25px;font-weight: bold">充值</div>
            </template>
            <recharge></recharge>
          </el-dialog>
        </div>

        <img :src="pic" style="border-radius:50%;height: 65px;width: 65px" @mouseover="movein" @mouseout="moveout">
      </div>



    </div>
    <div class="xian"></div>

    <div id="show"  @mouseenter="movein1" @mouseleave="moveout1">
      <div id="loin" >
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3696868384,2237634534&fm=26&gp=0.jpg" style="height: 180px;width: 300px">
        <el-button type="danger" round style="color: whitesmoke;cursor: pointer;width: 120px"  @click="handleclick()" >登录</el-button>
        <el-dialog :visible.sync="openOff" center :append-to-body='true' :lock-scroll="false"  width="30%" >
          <template slot="title">
            <div style="font-size: 25px;font-weight: bold">登录</div>
          </template>
          <login></login>
        </el-dialog>
        <el-button type="danger" round style="color: whitesmoke;cursor: pointer;width: 120px"  @click="handleclick1()" >注册</el-button>
        <el-dialog :visible.sync="openOff1" center :append-to-body='true' :lock-scroll="false"  width="30%">
          <template slot="title">
            <div style="font-size: 25px;font-weight: bold">注册</div>
          </template>
          <register></register>
        </el-dialog>
      </div>
      <div id="out">
        <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1873956212,2379096005&fm=26&gp=0.jpg"style="height: 200px;width: 300px">
        <div align="center"style="cursor:pointer;font-size: 25px;color: red"@click="updatenews()" >{{user}}</div>
        <el-dialog :visible.sync="openOff3" center :append-to-body='true' :lock-scroll="false"  width="30%">
          <template slot="title">
            <div style="font-size: 25px;font-weight: bold">修改个人信息</div>
          </template>
          <personal></personal>
        </el-dialog>
        <br>
        <el-button type="warning" round @click="logout()"style="margin-left: 100px;width: 100px">登出</el-button>
      </div>
    </div>
    <div id="ico" @click="check()"> <i class="el-icon-search"></i></div>
    <router-view />
  </div>

</template>

<script>
  import login from "./components/login";
  import Register from "./components/register";
  import recharge from "./components/recharge";
  import personal from "./components/personal";
  export default {
    name: 'App',
    components: {
      Register,
      login,
      recharge,
      personal

    },

    data(){
      return{
        openOff: false,
        openOff1:false,
        openOff2:false,
        openOff3:false,
        identifying:'',
        user:'',
        input:'',
        pic:'https://apic.douyucdn.cn/upload/avatar/default/07_big.jpg?rltime'
      }
    },
    methods:{
      handleclick(){
        this.openOff=true;//默认页面不显示为false,点击按钮将这个属性变成true
      },
      handleclick1(){
        this.openOff1=true;//默认页面不显示为false,点击按钮将这个属性变成true
      },
      hot(){
        this.openOff2=true;
      },
      updatenews(){
        this.openOff3=true;
      },
      movein(){
        this.identifying="1";
        var loin = document.getElementById("loin");
        var out = document.getElementById("out");
        if(this.user=="") {
          out.style.display = "none";
          loin.style.display = "block";
        }else{
          loin.style.display = "none";
          out.style.display = "block";
        }
      },
      moveout(){
        var loin=document.getElementById("loin");
        loin.style.display="none";
        var out = document.getElementById("out");
        out.style.display = "none";
      },
      movein1(){
        if(this.identifying=="1") {
          var loin = document.getElementById("loin");
          var out = document.getElementById("out");
          if (this.user == "") {
            out.style.display = "none";
            loin.style.display = "block";
          } else {
            loin.style.display = "none";
            out.style.display = "block";
          }
        }
      },
      moveout1(){
        var loin=document.getElementById("loin");
        loin.style.display="none";
        var out = document.getElementById("out");
        out.style.display = "none";
        this.identifying="0";

      },
      check: function (num) {
        if (num != null) {
          this.input = num;
          this.$router.push({name: "search", params: {content: this.input}});
        } else {
          // if(this.input==""){
          //   this.$router.push({name: "search", params: {content: "英雄联盟"}});
          // }else{
          this.$router.push({name: "search", params: {content: this.input}});

        }

      },
      vary(){
        this.$router.push("/");
      },
      logout(){
        this.$cookie.delete("token");
        localStorage.removeItem("data");
        window.location.reload();
      },
    },
    mounted() {
      var data=JSON.parse( localStorage.getItem("data"));
      if(data!=null){
        this.user=data.username;
        this.pic=data.pic;
        if(this.user!=""){
          this.openOff=false;
        }
      }
    }
  }
</script>

<style>

  .searchClass{
    border: 1px solid #c5c5c5;
    border-radius: 20px;
    background: #f4f4f4;
  }


  .searchClass .el-input__inner {
    height: 36px;
    line-height: 36px;
    border: none;
    background-color: transparent;
  }

  #ico{
    width: 20px;
    height: 20px;
    font-size: 20px;
    position: absolute;
    cursor: pointer;
    z-index:999;
    top:33px;
    left: 1444px;
  }
  #show{
    width: 300px;
    height: 250px;
    position: absolute;
    z-index:999;
    top:77px;
    left: 1530px;
  }
  #loin{
    width: 300px;
    height: 250px;
    display: none;
  }
  #out{
    width: 300px;
    height: 250px;
    display: none;
  }
  .xian{
    width: 100%;
    height: 8px;
    background-color: white;
    border-radius: 15px;
  }
  .box{
    width: 100%;
    margin: 0 auto;
    height: 70px;
    background-color: gray;
    border-radius: 15px;

  }
  .zuo{
    width: 70%;
    height: 70px;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    background-color: gray;
  }
  .tu{
    height: 70px;
    width: 70px;
  }
  .tu img{
    height: 70px;
    width: 70px;
  }
  .box1{
    width: 442px;
    height: 76px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: space-evenly;
    margin-left: -36px;
    font-size: 23px;
    font-family: cursive;
    border-radius: 15px;
  }
  a{
    text-decoration: none;
  }
  li{
    list-style: none;
  }
  /*.box1{
    width: 400px;
    height: 73px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }*/
  ul{
    height: 35px;
    display: flex;
    align-items: center;
    width: 450px;
    justify-content: space-between;
    font-size: 23px;
    font-family: cursive;
    margin-left: -141px;
  }
  li{
    color: white;
  }
</style>

